<template>
    <text :x="x" :y="y" :style="customStyle">
        <slot></slot>
    </text>
</template>

<script>
export default {
    name: 'VoGridText',
    props: {
        x: {
            type: [Number, String],
            default: '50%'
        },
        y: {
            type: [Number, String],
            default: '50%'
        },
        textAnchor: {
            //水平位置 start middle end
            type: String,
            default: 'middle'
        },
        active: Boolean,
        fill: {
            type: String,
            default: '#303133'
        },
        activeFill: {
            type: String,
            default: '#409EFF'
        },
        stroke: {
            type: String,
            default: '#DCDFE6'
        },
        strokeWidth: {
            type: Number,
            default: 0
        },
        activeStroke: {
            type: String,
            default: '#E6A23C'
        },
        activeStrokeWidth: {
            type: Number,
            default: 0
        }
    },
    computed: {
        customStyle() {
            return {
                userSelect: 'none',
                fill: this.active ? this.activeFill : this.fill,
                stroke: this.active ? this.activeStroke : this.stroke,
                strokeWidth: this.active ? this.activeStrokeWidth : this.strokeWidth,
                transition: '0.2s',
                textAnchor: this.textAnchor
            }
        }
    }
}
</script>